<template>
  <!--内容添加和编辑-->
  <el-dialog title='绑定系统' v-model='editLoading' @close="handleClose" :close-on-click-modal="false" width='90%'  top='6vh'>
    <el-row :gutter='20'>
      <el-col :span='12'>
        <div class='navleft'>
          <div class='grid-content mt10'>
            <h3 class="mb20">所有系统</h3>
            <el-table
                v-loading='tableLoading'
                :data='systemTableData'
                style='width: 100%;border:1px solid #eee;'>
              <el-table-column fixed prop="id" label="ID" width="50" align="center" />
              <el-table-column fixed label="系统logo" width="200" align="center">
                <template #default="scope">
                  <img :src="scope.row.logo" style="width: 28px;height:28px;border-radius:50%;">
                </template>
              </el-table-column>
              <el-table-column fixed label="系统名称" prop="sysname"  align="center"/>
              <el-table-column fixed label="系统编号" prop="syscode"  align="center"/>
              <el-table-column label='操作' align="center">
                <template #default="scope">
                  <el-button
                      type='success'
                      icon='remove'
                      @click='handlebindSystem(scope.row)'>绑定关系
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span='12'>
        <div class='navleft'>
          <div class='grid-content mt10'>
            <h3 class="mb20">当前用户绑定系统</h3>
            <el-table
                v-loading='tableLoading'
                :data='tableData'
                style='width: 100%;border:1px solid #eee;'>
              <el-table-column fixed prop="id" label="ID" width="50" align="center" />
              <el-table-column fixed label="系统logo" width="200" align="center">
                <template #default="scope">
                  <img :src="scope.row.logo" style="width: 28px;height:28px;border-radius:50%;">
                </template>
              </el-table-column>
              <el-table-column fixed label="系统名称" prop="sysname"  align="center"/>
              <el-table-column fixed label="系统编号" prop="syscode"  align="center"/>
              <el-table-column label='操作' align="center">
                <template #default="scope">
                  <el-button
                      type='danger'
                      icon='remove'
                      @click='handleUnbindSystem(scope.row)'>解除绑定
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup>
import {
  findPages,
  unbindSystemByUserId,
  bindSystemByUserId
} from '@/api/systemuser.js'
import {
  findPages as findSystemList,
} from '@/api/platform/system.js'
import kva from "@/utils/kva";
// 定义响应式得列表数据容器
const tableData = ref([])
const systemTableData = ref([])
const currentUserId = ref(0)
const tableLoading = ref(false)
const editLoading = ref(false)
const filterIds = ref([])
const handleLodeData = async (userId) => {
  tableLoading.value = true
  const resp = await findPages(userId)
  tableLoading.value = false
  tableData.value = resp.data
  filterIds.value = resp.data.map(c=>c.id)
}

const handleLoadSystemData = async ()=>{
  const resp = await findSystemList({pageNo:1,pageSize:1000})
  systemTableData.value = resp.data.records.filter(scope=>{
    return filterIds.value.findIndex(c=>c==scope.id)==-1
  })
}
// 解决绑定
const handleUnbindSystem = async(row) => {
  await unbindSystemByUserId(currentUserId.value,row.id)
  kva.success("解绑成功!")
  await handleLodeData(currentUserId.value)
  await handleLoadSystemData()
}

// 解决绑定
const handlebindSystem = async(row) => {
  await bindSystemByUserId(currentUserId.value,row.id)
  kva.success("解绑成功!")
  await handleLodeData(currentUserId.value)
  await handleLoadSystemData()
}

// 打开绑定
const handleOpen = async (userId) => {
  currentUserId.value = userId
  editLoading.value = true
  await handleLodeData(userId)
  await handleLoadSystemData()
}

// 关闭
const handleClose=()=> {
  editLoading.value = false
}

// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen,
  handleClose
})
</script>
<style scoped>

.page .wrap {
  background: #fff;
  padding: 10px;
  overflow: auto;
}

.navleft {
  border: 1px solid #eee;
  background: #fafafa;
  padding: 20px;
}


</style>
